import React,{ useRef } from 'react';

const App = () => {

  // react 的 hooks 能在两个地方使用，第一个是函数式组件中，第二个是 hooks 嵌套

  // 创建一个 ref 属性
  // 创建的时候可以将默认值设置为 null
  const inputRef = useRef(null)

  return (
    <div>
      {/* htmlFor 代替 for 属性的，用来和 input 中的 id 属性进行绑定使用的 */}
        <label htmlFor='inp'>用户名</label>
        <input id='inp' type="text" ref={inputRef} />

        <button onClick={()=>{
          // inputRef.current 就是用来获取到目标元素
          // .value 找到输入框中的内容
          console.log(inputRef.current.value);
        }}>获取输入的内容</button>
    </div>
  );
};

export default App;
